<template>
	<div class="z-[1] w-full pb-[20px] relative bg-[#f5f5f5] align-middle">
		<div class="z-[2] w-[750px] h-[280px] blur-[30px] absolute left-0
		 top-0 bg-[#0fb6f9]"></div>
		<div @click="Nav.navBack()" class="z-[3] relative text-[48px]
		 iconfont icon-xiangzuo icon">
			<span class="pl-[40px]">订单已送达</span>
		</div>
		<div class="z-[3] relative w-[700px] rounded-[25px] mx-[25px] mt-[10px] bg-[white] overflow-hidden">
			<div class="w-[650px] p-[22.5px] height-[65px] bg-[#fdfdfd] leading-[65px]">
				<div class="text-[48px] iconfont icon-shengyin icon2">
					<span class="inline-block pl-[20px] text-[24px] text-[#666666]">履行节俭，避免浪费</span>
				</div>
			</div>
			<div class="w-[750px] h-[120px] leading-[120px] border-solid border-b-[1px] border-[#0000000f] px-[22.5px] bg-white text-[36px] font-bold">感谢信任，期待再次光临</div>
			<div class="w-[700px] h-[130px] box-border flex flex-row
			 items-center justify-around text-center">
				<div>
					<div class="iconfont icon-pingjia icon4"></div>
					<div class="text-[24px] text-[#02bfd6]">评价</div>
				</div>
				<div>
					<div class="iconfont icon-dianhua icon3"></div>
					<div class="text-[24px]">电话商家</div>
				</div>
				<div>
					<div class="iconfont icon-dianhua icon3"></div>
					<div class="text-[24px]">电话骑士</div>
				</div>
				<div>
					<div class="iconfont icon-dashang icon3"></div>
					<div class="text-[24px]">打赏骑士</div>
				</div>
				<div>
					<div class="iconfont icon-xiadan icon3"></div>
					<div class="text-[24px]">再来一单</div>
				</div>
			</div>
		</div>
		<div class="w-[700px] h-[150px] box-border mt-[20px]
		 mx-[25px] bg-white rounded-[20px] px-[25px] flex
		  flex-row items-center justify-between">
			<div class="w-[550px]">
				<div class="text-[28px]">恭喜你，本单获得25成长值</div>
				<div class="text-[24px] text-[#19191980]">
					本月成长值240，再获得260可升至钻石会员
				</div>
			</div>
			<div class="w-[100px]">
				<div class="text-[#999999] text-[24px]">
					240/500
				</div>
				<input class="w-[100px]" disabled 
				type="range" min="0" max="500" value="240" name="" id="" />
			</div>
		</div>
		<div class="w-[700px] h-[70px] box-border mt-[20px] mx-[25px] bg-white rounded-[20px] px-[25px] flex flex-row items-center justify-between">
			<div class="iconfont icon-a-yinsibaohuyanzhengma icon3"><span class="text-[28px] ml-[10px]">其他服务</span></div>
			<div class="flex flex-row text-[#999999] text-[24px]">号码保护，售后无忧</div>
		</div>
		<div class="w-[700px] box-border p-[25px] rounded-[20px] mx-[25px] mt-[20px] bg-white">
			<div class="text-[28px]">铜锅洋芋饭</div>
			<div v-for="i in 5" class="flex flex-row items-center justify-between mt-[10px]">
				<img class="w-[100px] h-[100px]" :src="t1_g2_i1" alt="" />
				<div class="w-[300px]">
					<div class="text-[28px]">啤酒烧烤小套餐</div>
					<div class="text-[24px] text-[#999999]">x 1</div>
				</div>
				<div class="w-[180px] text-right text-[24px]">
					<div>实付<span class="text-[32px]">￥6.66</span></div>
					<div class="text-[#999999] line-through">￥8.88</div>
				</div>
			</div>
			<div class="flex flex-row items-center justify-between mt-[10px]">
				<div class="w-[300px]">
					<div class="text-[28px]">包装费</div>
				</div>
				<div class="w-[180px] text-right text-[24px]">
					<div>实付<span class="text-[32px]">￥6.66</span></div>
					<div class="text-[#999999] line-through">￥8.88</div>
				</div>
			</div>
			<div class="flex flex-row items-center justify-between mt-[10px]">
				<div class="w-[300px]">
					<div class="text-[28px]">配送费</div>
				</div>
				<div class="w-[180px] text-right text-[24px]">
					<div>实付<span class="text-[32px]">￥6.66</span></div>
					<div class="text-[#999999] line-through">￥8.88</div>
				</div>
			</div>
			<div class="flex flex-row items-center justify-end mt-[10px]
			 text-[28px] py-[30px] border-b-[1px] border-solid border-[#0000000f]">
				<div class="mr-[30px]">总优惠
					<span class="text-[32px] text-[#ff4b33]">￥6.66</span>
				</div>
				<div>实付
					<span class="text-[32px]">￥6.66</span>
				</div>
			</div>
			<div v-for="item in dataList" class="flex flex-row items-center justify-between mt-[20px] text-[28px] text-[#191919]">
				<div>{{ item.title }}</div>
				<div class="text-right">{{ item.value }}</div>
			</div>
		</div>
	</div>
</template>
<script setup lang="ts">
	import t1_g2_i1 from '@/assets/images/t1_g2_i1.webp';
	import { Nav } from '@/main';
	const dataList = [
		{
			title:'收货信息',
			value:'云南大学呈贡校区楸苑'
		},
		{
			title:'备注',
			value:'依据餐量提供餐具'
		},
		{
			title:'订单号码',
			value:'8208208820'
		},
		{
			title:'送达时间',
			value:'尽快送达'
		},
		{
			title:'配送方式',
			value:'蜂鸟快送'
		},
		{
			title:'配送骑士',
			value:'张三'
		},
		{
			title:'支付方式',
			value:'在线支付'
		},		{
			title:'下单时间',
			value:'2023-06-20 11:11:11.111'
		},

	]
</script>
<style scoped>
	.icon {
		font-weight: bold;
		padding: 20px;
		font-size: 36px;
		color: #fff;
	}
	.icon2 {
		font-size: 36px;
		color: #666666;
		line-height: 65px;
	}
	.icon3 {
		font-size: 36px;
		line-height: 50px;
	}
	.icon4 {
		font-size: 36px;
		color: #0fb6f9;
	}
</style>
